<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="box">
        <ul>
            <li><button>1</button></li>
            <li><button>2</button></li>
            <li><button>3</button></li>
            <li><button>4</button></li>
            <li><button>5</button></li>
            <li><button>6</button></li>
        </ul>
    </div>


    <script>
        let ul = document.querySelector("ul");
        // let li = document.querySelectorAll("li");
        let but = document.querySelectorAll("button");
        // 事件委托
        let b = [1, 2, 3, 4, 5, 6]
        ul.onclick = (e) => {
            e = e || window.event
            let li = document.querySelectorAll("li");

            // 判断点击的是否是按钮
            if (e.target.nodeName.toLowerCase() == "button") {
                b.forEach((item, index) => {
                    if (index + 1 == e.target.innerHTML) {
                        // console.log(item)
                        let b = li[index].cloneNode(true)
                        ul.insertBefore(b, li[index - 1])
                        li[index].remove()
                        // console.log(ul)
                        console.log(index)
                    }
                })
            }

        }
    </script>

</body>

</html>